<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入elementUI样式-->
    <link rel="stylesheet" href="../element-ui-2.13.0/lib/theme-chalk/index.css">
    <!--导入vue js文件-->
    <script src="../vue/vue-v2.6.10.js"></script>
    <script src="../vue/axios-0.18.0.js"></script>
    <!--导入elementUI js文件-->
    <script src="../element-ui-2.13.0/lib/index.js"></script>

</head>
<body>
<div id="app">


    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
            <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<style scoped>
    *{
        margin:0;
        padding:0;
    }
    html,body{
        height:100%;
    }
    #app{
        width: 100%;
        height: 100%;
        background:url(../bg.jpg) no-repeat center;
        background-size:100% 100%;

    }
    .demo-ruleForm{
        width: 400px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .el-form-item__label{
        color:#000;
    }


</style>
<script type="text/javascript">

    var validateUsername = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入用户名'));
        }
        callback();
    };

    new Vue({
        el: "#app",
        data: {
            ruleForm: {
                username: ''
            },
            rules: {
                username: [
                    {validator: validateUsername, trigger: 'blur'}
                ]
            },
            backend_url: "http://localhost:8081"

        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        axios.post(this.backend_url + "/loginHandle", this.ruleForm).then((res) => {

                            if (res.data.flag) {
                                this.$message({
                                    message: res.data.message,
                                    type: "success"
                                });
                                //window.location.href = window.location.origin + '/elog.html'
                                window.location.href = window.location.origin + '/elog'
                            }else {
                                this.$message({
                                    message: res.data.message,
                                    type: "error"
                                });
                                //alert(res.data.message);
                                //window.location.href = window.location.origin + '/login.html'
                            }


                        })


                    } else {
                        //alert('用户名或密码不能为空');
                        /*this.$message({
                            message: '用户名不能为空',
                            type: "error"
                        });*/
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    });
</script>
</html>
